<template>
	<view class="message">
		<view :class="item.isRead == 1 ? 'content_listyi' : 'content_list'" v-for="(item,index) in lists" @longtap="longtap(item,index)" @click="jump(item,index)">
		<!-- <view class="content_listyi" > -->
			<view class="item">
				<view class="name">
					{{item.title}}
				</view>
				<view class="mains">
					{{item.content}}
				</view>
				<view class="time">
					{{item.gmtCreate | times}}
				</view>
			</view>		
		</view>
		<u-modal :content="content" :show="show" @confirm='deleteback()' showCancelButton ref="uModal" :asyncClose="true" :closeOnClickOverlay="true" @cancel="() => show = false"></u-modal>
		<u-modal :content="msgcontent" :show="showmain" :title="msgtitle" @confirm='msgclose()' showCancelButton :closeOnClickOverlay="true" @cancel="() => showmain = false"></u-modal>
	</view>
</template>

<script>
	let timer=null
	import {
		list,
		deletes,
		main
	} from '@/api/messages'
	export default {
		
		data() {
			return {
				showmain:false,
				msgtitle:null,
				msgmain:null,
				msgcontent:'显示',
				
				
				content:'是否删除当前消息',
				show:false,
				lists:[],
				circles:{
					pageSize:15,
					pageNum:1,
				},
				msgid:null,
				msgindex:null,
			}
		},
		filters: {
			times(value) {
				let date = new Date(value);
				let y = date.getFullYear(); // 年
				let MM = date.getMonth() + 1; // 月
				MM = MM < 10 ? ('0' + MM) : MM;
				let d = date.getDate(); // 日
				d = d < 10 ? ('0' + d) : d;
				let h = date.getHours(); // 时
				h = h < 10 ? ('0' + h) : h;
				let m = date.getMinutes(); // 分
				m = m < 10 ? ('0' + m) : m;
				let s = date.getSeconds(); // 秒
				s = s < 10 ? ('0' + s) : s;
				// var timer =  y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
				var timer = y + '-' + MM + '-' + d;
				return timer;
			}
		},
		mounted(){
			this.circlelist();
		},
		onShow() {
			
		},
		onReachBottom() {
		            //阻止重复加载
		            if(timer !== null){
		                clearTimeout(timer)
		            }
					this.circles.pageNum++;
		            timer=setTimeout(()=>this.circlelist(),500)
		            // this.getMoreNews()
		},
		methods: {
			msgclose(){
				this.showmain = false;
				this.msgtitle = '';
				this.msgcontent = '';
			},
			jump(item,index){
				this.showmain = true;
				main(item.id).then(res => {
					if(res.success == 1){
						this.msgtitle = res.data.title;
						this.msgcontent = res.data.content;
						this.lists[index].isRead = 1;
					}else{
						this.circles.pageNum--;
						uni.showToast({
							title: res.message,
							icon:'none',
							duration: 2000
						});
					}
				})
				// uni.navigateTo({
				// 	url: "./main?id="+item.id
				// })
			},
			cancel(){
				this.show = false;
			},
			circlelist() {
				list(this.circles).then(res => {
					if(res.data.records.length != 0){
						for(let sss in res.data.records){
							this.lists.push(res.data.records[sss])
						}
					}else{
						this.circles.pageNum--;
						uni.showToast({
							title: '无更多消息',
							icon:'none',
							duration: 2000
						});
					}
				})
			},
			longtap(item,index){
				this.show = true;
				this.msgid = item.id;
				this.msgindex = index;
			},
			deleteback(){
				deletes([this.msgid]).then(res => {
					if(res.success == 1){
						this.lists.splice(this.msgindex, 1);
						uni.showToast({
							title: '删除成功',
							icon:'none',
							duration: 2000
						});
						this.msgid = null;
						this.msgindex = null;
					}else{
						uni.showToast({
							title: res.message,
							icon:'none',
							duration: 2000
						});
					}
					this.show = false;
				})				
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #e7e9ec;
	}
	
	.message {
		// height: 100vh;
		// width: 100%;
		padding: 20rpx;
	}
	.content_list {
		width: 100%;
		.item {
			background: #FFFFFF;
			border-radius: 12rpx;
			padding: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 20rpx 0;
			
			.name{
				width: 27%;
				color: rgba(0, 0, 0, 0.9);
				font-size: 30rpx;
				font-weight: 600;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				line-clamp: 1;
				-webkit-box-orient: vertical;
			}
			.mains{
				font-size: 30rpx;
				font-weight: 600;
				width: 50%;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				line-clamp: 1;
				-webkit-box-orient: vertical;
			}
			.time{
				width: 23%;
				color: rgba(195, 195, 195, 0.9);
				font-size: 22rpx;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				line-clamp: 1;
				-webkit-box-orient: vertical;
			}
		}
	}
	.content_listyi {
		width: 100%;
		.item {
			background: #e1e1e1;
			border-radius: 12rpx;
			padding: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 20rpx 0;
			
			.name{
				width: 27%;
				color: rgba(0, 0, 0, 0.9);
				font-size: 30rpx;
				font-weight: 600;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				line-clamp: 1;
				-webkit-box-orient: vertical;
			}
			.mains{
				font-size: 30rpx;
				font-weight: 600;
				width: 50%;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				line-clamp: 1;
				-webkit-box-orient: vertical;
			}
			.time{
				width: 23%;
				color: #FFFFFF;
				font-size: 22rpx;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				line-clamp: 1;
				-webkit-box-orient: vertical;
			}
		}
	}
</style>
